<template>
	<input type="text" name="" id="" v-model="data.obj.firstName" /><br />
	<input type="text" name="" id="" v-model="data.obj.lastName" /><br />
	<input type="text" name="" id="" v-model="data.obj.fullName" />
	<h2>当前求和为： {{ sum }}</h2>
	<h2>当前str 的值为： {{ str }}</h2>
	<button @click="addSum">+1</button>
	<button @click="updateStr">修改str</button>
	<h2>person内的值为：{{ person.name }} + {{ person.age }}</h2>
	<button @click="person.name = '王五'">修改preson.name的值</button>
  <h2>当前鼠标位置在: {{ point.x }} - {{ point.y }}</h2>
</template>

<script setup>
import {
	ref,
	reactive,
	computed,
	watch,
	watchEffect,
	onMounted,
	onBeforeMount,
	onBeforeUpdate,
	onUpdated,
	onBeforeUnmount,
	onUnmounted,
} from "vue";
import usePoint from '@/hooks/usePoint'

let data = reactive({
	obj: {
		firstName: "张",
		lastName: "三",
	},
	sum: 0,
});

let sum = ref(0);
let str = ref("你好");
let person = reactive({
	name: "李四",
	age: 19,
});

let point = usePoint()

// 简写形式 computed
// let fullName = computed(() => {
//   return `${data.obj.firstName}${data.obj.lastName}`
// })

// 完整形式 computed 考虑读 和 写
data.obj.fullName = computed({
	get() {
		return `${data.obj.firstName}-${data.obj.lastName}`;
	},
	set(value) {
		const nameAll = value.split("-");
		data.obj.firstName = nameAll[0];
		data.obj.lastName = nameAll[1];
	},
});

function addSum() {
	sum.value++;
}
function updateStr() {
	str.value = "我好";
}

// 事件监听 监听多个数据
// watch([sum,str], (newValue, oldValue) => {
//   console.log(newValue, oldValue)
// })
// 立即监听
// watch(sum, (newVal, oldVal) => {
//   console.log(newVal, oldVal)
// }, {immediate: true})

// 深度监听
/*
  监听的数据是一个对象
  1、无法正确的获取 oldValue
  2、强制开启深度监听
*/
// watch(person, (newVal, oldVal) => {
//   console.log(newVal, oldVal)
// }, { deep: true })

// 监听 reactive 定义的响应式数据中的一个属性 监听的数据是一个函数的返回值
watch(
	() => person.name,
	(newVal, oldVal) => {
		console.log(newVal, oldVal);
	}
);

watchEffect(() => {
	let test = sum.value;
	console.log("watchEffect 回调执行了", test);
});

// console.log("---created---");
// onBeforeMount(() => {
// 	console.log("---onBeforeMount---");
// });
// onMounted(() => {
// 	console.log("---onMounted---");
// });
// onBeforeUpdate(() => {
// 	console.log("---onBeforeUpdate---");
// });
// onUpdated(() => {
// 	console.log("---onUpdated---");
// });
// onBeforeUnmount(() => {
// 	console.log("---onBeforeUnmount---");
// });
// onUnmounted(() => {
// 	console.log("---onUnmounted---");
// });
</script>

<style></style>
